<template>
	<div class="equation-top-item-content">
		<div class="equation-top-item-bg" style="opacity: 1; width: 220px;">
			<div class="equation-top-dom-item" @click="selectItem" data-code="=" data-type="relationship" data-poupe="" data-key="">=</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\equiv" data-type="relationship" data-poupe="" data-key="">≡
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\neq" data-type="relationship" data-poupe="" data-key="">≠
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\sim" data-type="relationship" data-poupe="" data-key="">∼
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\simeq" data-type="relationship" data-poupe="" data-key="">≃
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\approx" data-type="relationship" data-poupe="" data-key="">
				≈
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\cong" data-type="relationship" data-poupe="" data-key="">≅
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\asymp" data-type="relationship" data-poupe="" data-key="">≍
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\ncong" data-type="relationship" data-poupe="" data-key="">≇
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\not\approx" data-type="relationship" data-poupe=""
				 data-key="">≉
			</div>
		</div>
		<div class="equation-top-item-bg" style="opacity: 1; width: 262px;">
			<div class="equation-top-dom-item" @click="selectItem" data-code="&gt;" data-type="relationship" data-poupe="" data-key="">
				&gt;
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="&lt;" data-type="relationship" data-poupe="" data-key="">
				&lt;
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\nprec" data-type="relationship" data-poupe="" data-key="">⊀
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\nsucc" data-type="relationship" data-poupe="" data-key="">⊁
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\gg" data-type="relationship" data-poupe="" data-key="">≫
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\ll" data-type="relationship" data-poupe="" data-key="">≪
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\geq" data-type="relationship" data-poupe="" data-key="">≥
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\leq" data-type="relationship" data-poupe="" data-key="">≤
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\nleq" data-type="relationship" data-poupe="" data-key="">≰
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\ngeq" data-type="relationship" data-poupe="" data-key="">≱
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\propto" data-type="relationship" data-poupe="" data-key="">
				∝
			</div>
		</div>
		<div class="equation-top-item-bg" style="opacity: 1; width: 262px;">
			<div class="equation-top-dom-item" @click="selectItem" data-code="\in" data-type="relationship" data-poupe="" data-key="">∈
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\exists" data-type="relationship" data-poupe="" data-key="">
				∃
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\notin" data-type="relationship" data-poupe="" data-key="">∉
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\subseteq" data-type="relationship" data-poupe="" data-key="">
				⊆
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\nsubseteq" data-type="relationship" data-poupe=""
				 data-key="">⊈
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\nsupseteq" data-type="relationship" data-poupe=""
				 data-key="">⊉
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\subset" data-type="relationship" data-poupe="" data-key="">
				⊂
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\supset" data-type="relationship" data-poupe="" data-key="">
				⊃
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\nsubset" data-type="relationship" data-poupe="" data-key="">
				⊄
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\supseteq" data-type="relationship" data-poupe="" data-key="">
				⊇
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\nsupset" data-type="relationship" data-poupe="" data-key="">
				⊅
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\nsubseteq" data-type="relationship" data-poupe=""
				 data-key="">⊈
			</div>
		</div>
		<div class="equation-top-item-bg" style="opacity: 1; width: 178px;">
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathbb{N}" data-type="relationship" data-poupe=""
				 data-key="">ℕ
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathbb{Z}" data-type="relationship" data-poupe=""
				 data-key="">ℤ
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathbb{P}" data-type="relationship" data-poupe=""
				 data-key="">ℙ
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathbb{Q}" data-type="relationship" data-poupe=""
				 data-key="">ℚ
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathbb{C}" data-type="relationship" data-poupe=""
				 data-key="">ℂ
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathbb{R}" data-type="relationship" data-poupe=""
				 data-key="">ℝ
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\varnothing" data-type="relationship" data-poupe=""
				 data-key="">∅
			</div>
		</div>
		<div class="equation-top-item-bg" style="opacity: 1; width: 136px;">
			<div class="equation-top-dom-item" @click="selectItem" data-code="\triangleleft" data-type="relationship" data-poupe=""
				 data-key="">◃
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\triangleright" data-type="relationship" data-poupe=""
				 data-key="">▹
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\trianglelefteq" data-type="relationship" data-poupe=""
				 data-key="">⊴
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\trianglerighteq" data-type="relationship" data-poupe=""
				 data-key="">⊵
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\land" data-type="relationship" data-poupe="" data-key="">∧
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\lor" data-type="relationship" data-poupe="" data-key="">∨
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
const props = defineProps({
	append: {
		type: Function,
		default: () => {}  // 默认空函数，避免报错
	}
});
const emit = defineEmits(['fomule']);
const selectItem = (event: MouseEvent) => {
	// 获取触发事件的元素
	const target = event.currentTarget as HTMLElement;
	// 读取 data-code 属性值
	const code = target.dataset.code;
	props.append(code);
	emit('fomule', code);
};
</script>
<style scoped lang="scss">

</style>
